<template>
  <div>
    <!-- <ckeditor
      @ready="onReady"
      :editor="editor"
      :value="editorData"
      :config="editorConfig"
      @input="$emit('input',$event)"
    ></ckeditor> -->
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: 'BasCkeditor',
  props: {
    content: {
      type: String,
      default: () => { return '' }
    },
    uploadImgHook: {
      type: Function,
      default () {
        return () => {
          console.error('img null')
        }
      }
    }
  },
  data () {
    return {
      editor: DecoupledEditor,
      editorData: this.content,
      editorConfig: {
        language: 'zh-cn', // 中文包
        ckfinder: {
          'uploaded': 1,
          'url': '/'
          // 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
        },
        fontFamily: {
          options: ['宋体', '仿宋', '微软雅黑', '黑体', '仿宋_GB2312', '楷体', '隶书', '幼圆']
        },
        fontSize: {
          options: [12, 'default', 14, 16, 18, 20, 22, 24, 26, 28, 36, 44, 48, 72]
        }
      }
    }
  },
  created () {
  },
  watch: {
    content () {
      this.editorData = this.content ? this.content : '<p></p>'
    }
  },
  methods: {
    // ...mapActions('filesystem', [
    //   'uploadFile'
    // ]),
    onProgress (option) {
    },
    onReady (editor) {
      let that = this
      editor.ui.getEditableElement().parentElement.insertBefore(
        editor.ui.view.toolbar.element,
        editor.ui.getEditableElement()
      )
      editor.plugins.get('FileRepository').createUploadAdapter = loader => {
        return { 
        }
      }
    }
  }
}
</script>
<style>
/* 直接覆盖 ckeditor 样式*/
.ck.ck-toolbar {
  width: 850px !important;
}
.ck.ck-content {
  width: 831px !important;
  height: 400px !important;
}
.ck.ck-editor__editable_inline {
  border: 1px solid #ccc !important;
}
.ck.ck-editor__editable_inline:focus {
  border-color: #409eff !important;
}
</style>